<!-- 专辑封面 -->
<template>
	<view>
		<!-- 信号栏变色 -->
		<view class="nav" :style="'background-color: rgba(0, 0, 0,' + op + ')'">
			<view class="status-bar" :style="'height:' + statusBarHeight + 'px'"></view>
		</view>
		<view v-if="!reList.length" class="loading">
			<u-loading-icon color="#1989fa"></u-loading-icon>
		</view>
		<view v-else class="root">
			<view class="header" :style="'margin-top:' + (titletop + titleheight / 2 - 10) + 'px'">
				<u-icon name="arrow-left" color="#fff" size="20" @click="back"></u-icon>
			</view>
			<view class="u-plhead album_header">
				<view class="plhead_bg" :style="'background-image: url(' + `https://music.163.com/api/img/blur/${albumContent.picId}?param=170y170` + ')'"></view>
				<view class="plhead_wrap">
					<view class="plhead_fl amhed_fl">
						<span class="amhed_flbg"></span>
						<image style="height: 100%" :src="albumContent.picUrl" alt="" />
						<span class="amhed_icon">专辑</span>
					</view>
					<view class="plhead_fr amhed_fr">
						<h2>{{ albumContent.name }}</h2>
						<view class="amhed_cnt f-thide">
							歌手：
							<span class="amhed_singer">{{ singer(albumContent.artists) }}</span>
						</view>
						<view class="amhed_time">发行时间：{{ time(albumContent.publishTime) }}</view>
					</view>
				</view>
			</view>
			<view class="album_intro" v-if="albumContent.description">
				<view class="u-intro" @click="show = !show">
					<view class="f-brk" :class="show ? 'f-thide3' : ''" style="white-space: pre-wrap">简介：{{ albumContent.description }}</view>
					<span :class="show ? 'u-arowdown' : 'u-arowup'"></span>
				</view>
			</view>
			<view class="pylst_list">
				<h3 class="u-smtitle">歌曲列表</h3>
				<view class="m-sglst">
					<hit-song-list :songlist="reList" :type="false" :routerId="id"></hit-song-list>
				</view>
				<view class="m_newcomm">
					<h4 v-if="hotComments.length">精彩评论</h4>
					<comment-view :comment="hotComments"></comment-view>
					<template v-if="hotComments.length < 15">
						<h4 v-if="total">最新评论({{ total }})</h4>
						<comment-view :comment="comments"></comment-view>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import HitSongList from '@/components/HitSongList.vue';
import CommentView from '@/components/CommentView.vue';
import { albumArtAPI, albumCommentsAPI } from '@/api';
import { filterTime } from '@/utils/common';
import { singer } from '@/utils/dedicated';
export default {
	components: { HitSongList, CommentView },
	data() {
		return {
			id: '', //获取当前页面的id值
			show: true, //是否隐藏简介
			reList: [], // 专辑歌曲
			albumContent: {}, // 专辑内容
			hotComments: [], // 精彩评论
			comments: [], // 最新评论
			total: 0,

			op: 0,
			titletop: 0,
			titleheight: 0,
			statusBarHeight: 0
		};
	},
	computed: {
		//时间格式化
		time() {
			return (val) => {
				return filterTime(val);
			};
		},
		//名字格式化
		singer
	},
	async onLoad(option) {
		this.id = option.id;
		// 调用APP中的数据
		getApp().getHeight();
		this.titletop = getApp().titletop;
		this.titleheight = getApp().titleheight;
		this.statusBarHeight = getApp().statusBarHeight;
		await this.albumArt();
		await this.albumComments();
	},
	onPageScroll(res) {
		let top = res.scrollTop;
		let height = this.statusBarHeight + 44;
		if (top <= height) {
			this.op = Math.round((top / height) * 100) / 100;
		} else {
			this.op = 1;
		}
	},
	methods: {
		//获取专辑信息
		albumArt() {
			albumArtAPI(this.id).then((res) => {
				this.reList = res.songs;
				this.albumContent = res.album;
			});
		},
		//获取专辑评论
		albumComments() {
			albumCommentsAPI({
				id: this.id
			}).then((res) => {
				this.hotComments = res.hotComments;
				if (this.hotComments.length < 15) {
					this.comments = res.comments.slice(0, 15 - this.hotComments.length);
					this.total = res.total;
				}
			});
		},
		back() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss" scoped>
.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
}

.header {
	position: absolute;
	left: 10px;
	z-index: 100;
	color: #fff;
}

.loading {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%);
}

.left-incon {
	position: absolute;
	top: 10px;
	left: 10px;
	font-size: 24px;
	z-index: 10001;
	color: #fff;
}

.u-plhead {
	position: relative;
	padding: 90px 10px 30px 15px;
	overflow: hidden;

	.plhead_bg {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 50%;
		filter: blur(20px);
		transform: scale(1.5);
		background-color: rgba(0, 0, 0, 0.25);
	}

	.plhead_bg:after {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}

	.plhead_wrap {
		display: flex;
		position: relative;
		z-index: 2;

		h2 {
			padding-top: 10px;
			font-size: 17px;
			line-height: 1.3;
			color: #fefefe;
			overflow: hidden;
			text-overflow: ellipsis;
			word-wrap: break-word;
			white-space: normal;
			margin: 0;
		}
	}

	.plhead_fl {
		width: 126px;
		height: 126px;
		position: relative;
		background-color: #e2e2e3;
	}

	.amhed_fr {
		margin-left: 26px;
		color: hsla(0, 0%, 100%, 0.5);
	}

	.plhead_fr {
		flex: 1 1 auto;
		width: 1%;
	}

	.amhed_flbg {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		height: 100%;
		padding-left: 115%;
		background: url('https://s3.music.126.net/mobile-new/img/album@2x.png?4d5d63fbc459c8e2f7dddead07514fba=') 100% no-repeat;
		background-size: contain;
	}

	.amhed_icon {
		position: absolute;
		z-index: 3;
		top: 10px;
		left: 0;
		padding: 0 8px;
		height: 17px;
		color: #fff;
		font-size: 9px;
		text-align: center;
		line-height: 17px;
		background-color: rgba(217, 48, 48, 0.8);
		border-top-right-radius: 17px;
		border-bottom-right-radius: 17px;
	}

	.amhed_cnt {
		margin-top: 22px;
	}

	.amhed_time {
		margin-top: 5px;
		font-size: 12px;
	}

	.amhed_singer {
		color: #fff;
	}
}

.f-thide {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-break: normal;
}

.album_intro {
	padding: 10px 10px 0 15px;

	.u-intro {
		position: relative;
		padding-bottom: 18px;
		line-height: 19px;
		color: #666;

		.f-thide3 {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}

		> span {
			position: absolute;
			bottom: 3px;
			right: 0;
			z-index: 3;
			width: 15px;
			height: 15px;
			background-position: 50%;
			background-repeat: no-repeat;
			background-size: 12px auto;
		}

		.u-arowdown {
			background-image: url('');
		}

		.u-arowup {
			background-image: url('');
		}
	}
}

.f-brk {
	word-wrap: break-word;
	white-space: normal;
}

.pylst_list {
	.u-smtitle {
		height: 23px;
		line-height: 23px;
		padding: 0 10px;
		font-size: 12px;
		color: #666;
		background-color: #eeeff0;
		font-weight: 400;
		margin: 0;
	}

	.m_newcomm {
		position: relative;
		margin-top: 18px;

		> h4 {
			padding: 0 10px;
			height: 23px;
			line-height: 23px;
			margin: 0;
			color: #666;
			font-size: 12px;
			font-weight: 400;
			background: rgba(0, 0, 0, 0.05);
		}
	}
}
</style>
